<template>
  <div class="rank-list">
    <div class="rank-title">
      <h4 class="rank-text">宝贝排行榜</h4>
    </div>
    <div class="rank-body">
      <div class="rank-navigation">
        <button @click="label='sales'" :class="label === 'sales'? 'rank-btn text-write':'rank-btn'">销售量</button>
        <button @click="label='collection'" :class="label === 'collection'? 'rank-btn text-write':'rank-btn'">收藏数</button>
      </div>
      <div class="rank-content">
        <ul class="content">
          <li class="content-body" v-for="sp in show[label]" :key="sp.id">
            <img :src="sp.pic" class="image">
            <div class="content-text">
              <p class="text-title text-overflow" :title="sp.title">{{sp.title}}</p>
              <h5 class="text-price text-overflow">￥{{sp.price}}</h5>
              <p class="text-sale text-overflow">已售出<span>{{sp.sale}}</span>笔</p>
            </div>
          </li>
        </ul>
        <div class="rank-more">
          <a href="#" class="more-text">
            查看更多宝贝
            <div class="more-back">
              <i class="more-icon el-icon-arrow-right"></i>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {reactive, ref} from "vue";

  export default {
    name: "RankingList",
    setup(){
      let label = ref("sales")
      let show = reactive({
        sales:[
          {
            id:'01',
            title:'白糖玫瑰21黑色机能工装风衣外套男青年中长款痞帅气质连帽秋冬季',
            pic:require("@/assets/image/rankingList/xsl1.png"),
            price:198.00,
            sale:3284239,
          },
          {
            id:'02',
            title:'冠琴正品男士手表机械表全自动钢带防水夜光商务潮流腕表品牌男表',
            pic:require("@/assets/image/rankingList/xsl2.png"),
            price:688.00,
            sale:3084395,
          },
          {
            id:'03',
            title:'925纯银三叶草项链女夏轻奢小众2021年新款女网红饰品颈链锁骨链',
            pic:require("@/assets/image/rankingList/xsl3.png"),
            price:139.90,
            sale:2784395,
          },
          {
            id:'04',
            title:'流水招财生财摆件家居创意喷泉客厅办公室桌面乔迁新居开业礼品',
            pic:require("@/assets/image/rankingList/xsl4.png"),
            price:428.00,
            sale:2482925,
          },
          {
            id:'05',
            title:'colorcandy硅胶皇冠美妆蛋不吃粉海绵化妆蛋干湿两用超软化妆工具',
            pic:require("@/assets/image/rankingList/xsl5.png"),
            price:109.00,
            sale:1924828,
          }
        ],
        collection:[
          {
            id:'01',
            title:'Haier/海尔 LU75C51(PRO) 75英寸4K智能语音超高清平板液晶电视',
            pic:require("@/assets/image/rankingList/scl1.png"),
            price:3724.00,
            sale:6248230,
          },
          {
            id:'02',
            title:'佳能EOS 5D Mark IV单机身套机5D4全画幅专业高清数码单反相机5D3',
            pic:require("@/assets/image/rankingList/scl2.png"),
            price:14142.00,
            sale:5739247,
          },
          {
            id:'03',
            title:'熔铜工艺品禅意罗汉松招财树办公桌面摆件酒柜玄关书房装饰礼品',
            pic:require("@/assets/image/rankingList/scl3.png"),
            price:6988.00,
            sale:5038162,
          },
          {
            id:'04',
            title:'螺钿漆器首饰盒木质结婚礼物手饰品珠宝盒复古中式收纳盒Z1015',
            pic:require("@/assets/image/rankingList/scl4.png"),
            price:8131.20,
            sale:4827304,
          },
          {
            id:'05',
            title:'GUCCI古驰Dionysus酒神系列Supermini单肩包',
            pic:require("@/assets/image/rankingList/scl5.png"),
            price:7400.00,
            sale:3784395,
          }
        ]
      })

      return {
        label,
        show,
      }
    }
  }
</script>

<style scoped>
  *{
    color: #666;
    font-size: 13px;
  }
  a{
    text-decoration: none;
  }
  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .text-write{
    background-color: white !important;
  }
  .rank-list{
    margin-right: 17px;
  }
  .rank-title{
    background-color: black;
  }
  .rank-text{
    color: white;
    margin: 0;
    padding: 5px 10px;
    font-size: 15px;
  }
  .rank-btn{
    display: inline-block;
    color: #666666;
    text-align: center;
    font-size: 14px;
    width: 50%;
    line-height: 45px;
    height: 45px;
    background-color: #e5e5e5;
    border: none;
  }
  .rank-btn:hover{
    cursor: pointer;
  }
  .rank-content{
    border: 1px #e5e5e5 solid;
  }
  .content-body{
    border-bottom: 1px #ebebeb dashed;
    padding: 20px 16px;
  }
  .image{
    width: 54px;
    height: auto;
    margin-right: 5px;
  }
  .content-text{
    float: right;
    position: relative;
    width: 60%;
  }
  .text-overflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .text-title{
    margin: 0;
  }
  .text-price{
    margin: 0;
    color: #cc0000;
  }
  .text-sale{
    margin: 0;
    color: #999999;
  }
  .text-sale span{
    color: #cc9977;
    font-weight: bold;
  }
  .rank-more{
    margin: 50px 30px;
  }
  .more-text{
    background-color: #e5e5e5;
    color: #666666;
    padding: 10px 20px;
    border-radius: 4px;
    margin-top: -2px;
    font-size: 14px;
  }
  .more-back{
    background-color: #999999;
    border-radius: 50%;
    padding: 1px;
    display: inline-block;
  }
  .more-icon{
    color: white;
    display: table-cell;
    text-align: center;
    font-weight: bold;
    margin-top: 2px
  }
</style>